<template>
  <div>
    <Thumb :move="moveX" :ratio="ratioX" :size="width" :always="always" />
    <Thumb
      :move="moveY"
      :ratio="ratioY"
      :size="height"
      vertical
      :always="always"
    />
  </div>

</template>

<script setup>
import { ref,defineExpose } from 'vue'
import { GAP } from './util'
import Thumb from './thumb.vue'

const props=defineProps({
  always: {
    type: Boolean,
    default: true,
  },
  width: String,
  height: String,
  ratioX: {
    type: Number,
    default: 1,
  },
  ratioY: {
    type: Number,
    default: 1,
  },
})

const moveX = ref(0)
const moveY = ref(0)

const handleScroll = (wrap) => {
  if (wrap) {
    const offsetHeight = wrap.offsetHeight - GAP
    const offsetWidth = wrap.offsetWidth - GAP

    moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * props.ratioY
    moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * props.ratioX
  }
}

defineExpose({
  handleScroll:handleScroll,
})

</script>

<style>

</style>